@mi-prefix: mi-;
@mi-tooltip: ~'@{mi-prefix}tooltip';

.@{mi-tooltip} {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    > [class*="mi-tooltip-"] {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 14px;
        position: absolute;
        transition: all .1s ease;
        z-index: 19900407;
    }

    &-content {
        margin: 0;
        padding: 0;
        box-shadow: 0 0 6px fade(#000, 30%);
    }

    &-arrow {
        position: absolute;
        width: 12px;
        height: 12px;
        display: block;
        background: transparent;
        overflow: hidden;
        pointer-events: none;

        &-inner {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            width: 11px;
            height: 11px;
            margin: auto;
            background: fade(#000, 75%);
            box-shadow: 0 0 4px fade(#000, 15%);
            content: '';
            pointer-events: auto;
            transform: translateY(-9px) rotate(45deg);
        }
    }

    &-inner {
        min-width: 30px;
        padding: 6px 12px;
        font-size: 12px;
        text-align: left;
        letter-spacing: 2px;
        color: #fff;
        text-decoration: none;
        line-height: 22px;
        word-wrap: break-word;
        background: fade(#000, 75%);
        border-radius: 4px;
    }

    &-top &-arrow,
    &-top-left &-arrow,
    &-topLeft &-arrow,
    &-topRight &-arrow,
    &-top-right &-arrow {
        transform: translateX(-50%);
        bottom: -12px;
    }

    &-top &-arrow {
        left: 50%;
    }

    &-top-left &-arrow,
    &-topLeft &-arrow {
        left: 16px;
    }

    &-top-right &-arrow,
    &-topRight &-arrow {
        right: 8px;
    }

    &-left &-arrow,
    &-leftTop &-arrow,
    &-left-top &-arrow,
    &-leftBottom &-arrow,
    &-left-bottom &-arrow {
        right: -18px;
        transform: translateX(-50%);

        &-inner {
            transform: translateX(-9px) rotate(45deg);
        }
    }

    &-left &-arrow {
        transform: translateY(-50%);
        top: 50%;
        right: -12px;
    }

    &-left-top &-arrow,
    &-leftTop &-arrow {
        top: 8px;
    }

    &-left-bottom &-arrow,
    &-leftBottom &-arrow {
        bottom: 8px;
    }

    &-bottom &-arrow,
    &-bottomLeft &-arrow,
    &-bottom-left &-arrow,
    &-bottomRight &-arrow,
    &-bottom-right &-arrow {
        transform: translateX(-50%);
        top: -12px;

        &-inner {
            transform: translateY(9px) rotate(45deg);
        }
    }

    &-bottom &-arrow {
        left: 50%;
    }

    &-bottomLeft &-arrow,
    &-bottom-left &-arrow {
        left: 16px;
    }

    &-bottomRight &-arrow,
    &-bottom-right &-arrow {
        right: 16px;
    }

    &-right &-arrow,
    &-rightTop &-arrow,
    &-right-top &-arrow,
    &-rightBottom &-arrow,
    &-right-bottom &-arrow {
        left: -12px;
        transform: translateY(-50%);

        &-inner {
            transform: translateX(9px) rotate(45deg);
        }
    }

    &-right &-arrow {
        top: 50%;
    }

    &-rightTop &-arrow,
    &-right-top &-arrow {
        top: 12px;
    }

    &-rightBottom &-arrow,
    &-right-bottom &-arrow {
        bottom: 0;
    }
}

.@{mi-prefix} {
    /** Scale */
    &scale-enter-active,
    &scale-leave-active {
        opacity: 1;
        transform: scale(1);
    }

    &scale-enter-from,
    &scale-leave-to {
        transform: scale(0);
        opacity: 0
    }

    /** Newspaper */
    &newspaper-enter-active,
    &newspaper-leave-active {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    &newspaper-enter-from,
    &newspaper-leave-to {
        transform-style: preserve-3d;
        transform: scale(0) rotate(720deg);
        opacity: 0
    }

    /** Sticky */
    &sticky-enter-active,
    &sticky-leave-active {
        opacity: 1;
        transform: translateY(0);
    }

    &sticky-enter-from,
    &sticky-leave-to {
        transform: translateY(-200%);
        opacity: 0
    }

    /** Sign */
    &sign-enter-active,
    &sign-leave-active {
        transform: rotateX(0deg);
        opacity: 1;
    }

    &sign-enter-from,
    &sign-leave-to {
        transform-style: preserve-3d;
        transform: rotateX(-90deg);
        transform-origin: 50% 0;
        opacity: 0
    }

    /** Flip */
    &flip-enter-active,
    &flip-leave-active,
    &flip-horizontal-enter-active,
    &flip-horizontal-leave-active {
        opacity: 1;
        transform: rotateY(0deg);
    }

    &flip-enter-from,
    &flip-leave-to,
    &flip-horizontal-enter-from,
    &flip-horizontal-leave-to {
        transform-style: preserve-3d;
        transform: rotateY(-70deg);
        opacity: 0
    }

    &flip-vertical-enter-active,
    &flip-vertical-leave-active {
        opacity: 1;
        transform: rotateX(0deg);
    }

    &flip-vertical-enter-from,
    &flip-vertical-leave-to {
        transform-style: preserve-3d;
        transform: rotateX(-70deg);
        opacity: 0
    }
}